<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <button>卸载</button>
    <div id="root"></div>
    <script type="text/babel">
        // 卸载方式二：通过unmount方法
        const root = ReactDOM.createRoot(document.querySelector("#root"));
        class App extends React.Component{
            render(){
                return(
                    <div>
                        <button onClick={()=>root.unmount()}>卸载</button>
                        <h3>App</h3>
                    </div>
                )
            }

            componentWillUnmount(){
                console.log('Component----componentWillUnmount');
            }
        }
        root.render(<App/>)

        //也可以在外部应用卸载方法unmount
        const btn = document.querySelector("button");
        btn.onclick = function(){
        root.unmount();
    }

    //卸载方式 一：通过 &&
    /*
        class App extends React.Component {
            state={
                    isShow:true
                }
            constructor(){
                super();
                console.log('1---constructor');
            }

            UNSAFE_componentWillMount(){
                console.log('2---UNSAFE_componentWillMount')
            }

            render(){
                console.log('3---render')
                return(
                    <div>
                        <button onClick={()=>{this.setState({isShow:!this.state.isShow})}}>显示与隐藏</button>
                        {
                        
                            this.state.isShow && <Child/>
                        }
                    </div>
                )
            }

            componentDidMount(){
                console.log('8----componentDidMount')
            }
        }

        class Child extends React.Component{
            state={
                num:1
            }
            constructor(){
                super(); 
                console.log('4----constructor')
            }

            UNSAFE_componentWillMount(){
                console.log('5----UNSAFE_componentWillMount')
            }


            render(){
                console.log('6----render')
                return(
                    <div>Child:{this.state.num}</div>
                )
            }

            componentDidMount(){
                console.log('7----componentDidMount')
                this.timer=setInterval(()=>{
                    console.log(21312321)
                    this.setState({num:this.state.num+1})
                },1000)
            }

            //即将销毁
            componentWillUnmount(){
                console.log("componentWillUnmount")
                clearInterval(this.timer)        
            }
        }

        ReactDOM.createRoo t(document.querySelector('#root')).render(<App/>)*/
    </script>
</body>

</html>